<template>
	<!-- <view class="container" :style="{paddingTop:tH}">
		<view class="headerTit" :style="{height:tH,paddingTop:pT}">
			泗河基地
		</view> -->
	<sys-container :label="'消防设施操作员理论练习与考试'" showBack withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				
				<view class="taskList">
				
							<view class="singleTask" style="height:100%">
								<view class="taskTit">
									<u-tag bg-color="#E70012" color="#fff"> {{dataInfo.question_type==1?'单选':dataInfo.question_type==2?'多选':'判断'}}题</u-tag>
									<text class="title" style="margin-left:12rpx">
										{{dataInfo.stem}}
									</text>
								</view>
								<view class="selectBox">
									<!-- <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" /> -->
									<view class="singleSelect" >
										<radio-group  v-if="dataInfo.question_type==1||dataInfo.question_type==3">
											<label class="singleRadio" v-for="(op,idx) in Object.keys(dataInfo.option)" :key="idx">
												<view>
													<radio :value="op" :checked="dataInfo.answer ===dataInfo.option[op]" disabled/>
												</view>
												<view>{{op}}:{{dataInfo.option[op]}}</view>
											</label>
										</radio-group>
										<checkbox-group  v-if="dataInfo.question_type==2">
														<label class="singleRadio" v-for="(op,idx) in Object.keys(dataInfo.option)" :key="idx">
															<view>
																<checkbox :value="dataInfo.option[op]" disabled :checked="dataInfo.answerArr.findIndex((item)=>{return item==op})>=0"/>
															</view>
															<view>{{op}}:{{dataInfo.option[op]}}</view>
														</label>
													</checkbox-group>
									
										
									</view>
									<view class="taskResult" v-if="dataInfo.question_type==1||dataInfo.question_type==3">
										<view class="trueTask">
											正确：{{dataInfo.option[Object.keys(dataInfo.option).find(item=>{
												return dataInfo.answer==dataInfo.option[item]
											})]}}
										</view>
										<view class="falseTask">
											您选择：{{ dataInfo.option[Object.keys(dataInfo.option).find(item=>{
												return dataInfo.user_answer==dataInfo.option[item]
											})]}}
										</view>
									</view>
									<view class="taskResult" v-else>
										<view class="trueTask">
											正确：{{this.dataInfo.answerArr.join(',')}}
										</view>
										<view class="falseTask">
											您选择：{{this.dataInfo.userAnswerArr.join(',')}}
										</view>
									</view>
								</view>
							</view>
						
				</view>
				
				<view class="btnArea">
					<van-button block color="#F82A08" @tap="changeStatus" custom-style="width:100%;height:100%">我已掌握</van-button>
				</view>
			</view>

		</template>

	</sys-container>

	<!-- </view> -->
</template>

<script>
	import {testPaperQuestions,submitQuestions,submitWrongBank} from '@/globalApi/requestApi.js'
	export default {
		components: {

			// sysContainer
		},
		data() {
			return {
				dataInfo:{
					option:'',
					answerArr:[],
					userAnswerArr:[]
				}
			}
		},
		onLoad(options) {
			let that = this
			this.dataInfo = JSON.parse(options.data)
			// console.log(this.dataInfo)
			this.dataInfo.option = JSON.parse(this.dataInfo.option)
			if(this.dataInfo.question_type==2){
				this.dataInfo.user_answer = this.dataInfo.user_answer.split(',')
				this.dataInfo.answer = this.dataInfo.answer.split('，')
				console.log(this.dataInfo.answer)
				this.dataInfo.answerArr = this.dataInfo.answer.map(item=>{
					return  Object.keys(that.dataInfo.option).find(data=>{
						// console.log(data,item)
						return that.dataInfo.option[data] == item
					})
				})
				this.dataInfo.userAnswerArr = this.dataInfo.user_answer.map(item=>{
					return  Object.keys(that.dataInfo.option).find(data=>{
						// console.log(data,item)
						return that.dataInfo.option[data] == item
					})
				})
			}
		},
		onShow(){
		},
		methods: {
			changeStatus(){
				console.log(this.dataInfo)
				submitWrongBank({
					wrong_id:this.dataInfo.id,
					questions_id:this.dataInfo.questions_id,
					is_master:1
				}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'掌握成功！',
							icon:'success'
						})
						uni.navigateBack()
					}
				})
			}
			
		
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		height: 100%;
		width: 100%;
		background: #f8f8f8;
		overflow: hidden;
		padding-bottom: 165rpx;
		.taskResult{
			width:100%;
			// display: flex;
			// align-items: center;
			// justify-content: flex-start;
			// height:66rpx;
			padding:20rpx 30rpx;
			background:#FBD9DC;
			box-sizing: border-box;
			.trueTask{
				margin-right:50rpx;
			}
		}

		.taskList {
			margin-top: 25rpx;
			width: 100%;
			height:100%;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			.singleTask {
				width: 100%;

				.taskTit {
					width: 100%;
					// display: flex;
					// align-items: center;
					// justify-content: flex-start;
					margin-bottom: 43rpx;
					flex-wrap: wrap;
					.title {
						font-size: 30rpx;
						font-weight: 400;
						color: #222222;
					}
				}
				.singleSelect{
					margin-bottom:27rpx;
					display: flex;
					align-items:center;
					.singleRadio{
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-bottom:27rpx;
					}
				}
			}
		}
		.btnArea{
			position:fixed;
			width:100%;
			left:0;
			bottom:0;
			height:90rpx
		}
		
	}
</style>